<template>
	<view class="index">
		<image class="img" src="../static/ic_1.png" mode=""></image>
		<text class="title">支付成功</text>
		<text class="ftitle">您已成功完成支付</text>
		<view class="btn" @click="gouser">立即使用（倒计时 {{num}}）</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				num:10,
				id:'',
				timer:'',
				Frequency:'',
				Intensity:''
			}
		},
		onLoad(option){
			this.id = option.id
			this.Frequency = option.Frequency
			this.Intensity = option.Intensity
			this.timer = setInterval(()=>{
				this.num--
				if(this.num <=0){
					clearInterval(this.timer)
					this.gouser()
				}
			
			},1000)
		},
		methods:{
			gouser(){
				if(this.timer){
					clearInterval(this.timer)
				}
				this.$linkTo(`/package/RhythmicInstrument/operation/index?id=${this.id}&Frequency=${this.Frequency}&Intensity=${this.Intensity}`,'reLaunch')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.index {
		margin-top: 190rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;

		.img {
			width: 310rpx;
			height: 210rpx;
			margin-bottom: 70rpx;
		}
		.title{
			font-size: 36rpx;
			color: #000;
			font-weight: bold;
			margin-bottom: 26rpx;
		}
		.ftitle{
			font-size: 28rpx;
			color: #999;
			margin-bottom: 100rpx;
		}
		.btn{
			width: 536rpx;
			height: 98rpx;
			border-radius: 6rpx;
			background-color: #1966FF;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #fff;
			font-size: 32rpx;
		}
	}
</style>
